<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    },
    dataSource: { type: Function, default: () => {} },
  },
  data() {
    return {
      chart: null,
      listQuery: {
        page: 1,
        pageSize: 10
      },
      tableData:[]
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  created(){
    this.getPageList()

  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    getPageList() {
      this.dataSource()(this.listQuery).then(res => {
        if (res.code === 200) {
            this.tableData = res.data.pageList
            console.log('jieguo', res)
        }
      })
    },
    initChart() {
       // 提取日期和数据
      //  var dates = this.lineData.map(item => item.Date);
      //   var loginData = this.lineData.map(item => item.LoginUserNum);
      //   var unlockData = this.lineData.map(item => item.UnlockUserNum);
      //   var userData = this.lineData.map(item => item.UserNum);

      this.chart = echarts.init(this.$el, 'macarons')

      this.chart.setOption(
     {
      title: {
    text: 'World Population'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01]
  },
  yAxis: {
    type: 'category',
    data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
  },
  series: [
    {
      name: '用户数量',
      type: 'bar',
      data: [18203, 23489, 29034, 104970, 131744, 630230]
    },
    {
      name: '登录用户数',
      type: 'bar',
      data: [19325, 23438, 31000, 121594, 134141, 681807]
    },
    {
      name: '登录次数',
      type: 'bar',
      data: [19325, 23438, 31000, 121594, 134141, 681807]
    },
  ]
     }
    )
    }
  }
}
</script>
